/* 通用选择器 * 通常不建议使用 */
/* *{
    margin: 0;
    padding: 0;
} */
/* ID选择器 */
#main{
    color: lime;
}
/* 类选择器 */
.news_title{
    color: magenta;
}
/* 元素选择器 */
h3{
    color: olive;
}
/* 属性选择器 */
[title]{
    font-size: 1.5em;
}
p[data-bind]{
    color: palegoldenrod;
}
p[title="abc"]
{
    color: peru;
}
p[title~="de"]{
    color: red;
}
p[title|="xyz"]{
    color: yellow;
}
a[href][title]{
    color: rgb(255, 0, 0);
    font-size: .75em
    
    ;
}
/* 伪类与伪元素选择器 */
p:hover{
    background-color: cyan;
}
li:hover{
    background-color: yellow;
}
a{
    color: crimson;
}

a:link{
    color: burlywood;
}
a:visited{
    color: chartreuse;
}
a:hover{
    font-weight: bold;
}
a:active{
    color: rgb(255, 0, 0);
}
input:focus{
   background-color: rgb(255, 217, 0);
}
pre:first-child{
    color: greenyellow;
}
li:first-child{
    color: indianred;
}
div p::first-line{
    color: red;
}
div p::first-letter{
    font-weight: bold;
    font-size: 200%;
}
div h1::before{
    content: "before:";
}
div h1:after{
    content:":after";
}
/* 组合选择器 */
div span{
    color:blueviolet;
}
p>span{
    color: chartreuse;
}

pre + span{
    color: chartreuse;
}
pre ~ span.bor{
    color: darkgoldenrod;
}